<template>
  <div :class="['b-fast-item cursor-pointer inline-flex items-center',{
    'b-fast-item--active':active,
    'b-fast-item--disabled':disabled,
    'b-fast-item--closable':closable,
  }]"
       :ref="`b-fast-item--${uuid}`">
    <div class="b-fast-item__prefix"
         v-if="$slots.prefix || prefix">
      <slot name="prefix">
        <ZIcon :icon="prefix" />
      </slot>
    </div>

    <div class="b-fast-item__content flex-1 inline-flex items-center ">
      <slot>
        <ZTooltip :line="1"
                  :content="content">
          <span>{{ content }}</span>
        </ZTooltip>
        <ZTag :type="disabled?'disabled':'blue'"
              round
              size="mini"
              style="margin-left: 4px">
          {{ total || 0 }}
        </ZTag>
      </slot>
    </div>
    <div class="b-fast-item__suffix"
         v-if="$slots.suffix || suffix">
      <slot name="suffix">
        <ZIcon :icon="suffix"
               :size="12"
               @click.native.stop="$emit('close')" />
      </slot>
    </div>
  </div>
</template>

<script>
import ZIcon from '@/components/storybook/z-icon'
import ZTag from '@/components/storybook/z-tag'
import ZTooltip from '@/components/storybook/z-tooltip'
import { v4 } from 'uuid'

export default {
  name: 'BFastItem',
  components: {
    ZIcon,
    ZTag,
    ZTooltip
  },
  props: {
    active: Boolean,
    disabled: Boolean,
    closable: {
      type: Boolean,
      default: true
    },
    prefix: String,
    suffix: String,
    content: String,
    total: [String, Number]
  },
  data () {
    return {
      uuid: v4()
    }
  }

}
</script>

<style lang="scss" scoped>
.b-fast-item {
  height: 40px;
  background: #f2f6fc;
  font-size: 14px;
  padding: 13px 16px;
  color: #404040;
  overflow: hidden;

  &--active {
    background: #ffffff;
    color: #0050b3;
  }
  &--disabled {
    pointer-events: none;
    cursor: not-allowed;
    color: #909399;
    background: #f4f4f5;
  }

  &__prefix {
    margin-right: 6px;
  }
  &__suffix {
    margin-left: 6px;
  }
  &--closable {
    .b-fast-item__suffix {
      width: 0;
      margin-left: 0;
      overflow: hidden;
      transition: all 200ms;
    }
    &:hover {
      .b-fast-item__suffix {
        width: 18px;
        margin-left: 6px;
      }
    }
  }
}
</style>
